<template>
  <view class="content">
<!--    <view class="tranInfo">
      本公文于 <span>{{prevDate}}</span> 由  <span>{{prevUser}}</span> 处转来
    </view>-->
    <view class="form-row">
      <view class="flex-one jjzy" v-if="detailObj1.detailObj.jinjizhongyao == '1'">
        <span class="jjzy-border">紧急重要</span>
      </view>
      <view class="flex-two mj">
        <label>密级</label>
        <span>{{mj}}</span>
        <label style="margin-left: 40rpx;">紧急程度</label>
        <span>{{this.dict.getDictNameByDictCode('jjcd',detailObj1.detailObj.emergencyLevel)}}</span>
      </view>
    </view>

    <view class="title">
      {{this.cache.get('userInfo').extend1}}<span>{{detailObj1.detailObj.drafterDeptName}}</span>呈批件
    </view>
    <view class="form-border" style="box-sizing: border-box;">
      <view class="form-row" style="min-height: 120rpx;">
        <view class="flex-one form-border-right">
          <label>领导批示 </label>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['czps'] != undefined">
            <view v-for="item in detailObj1.opinion.czps">
              <view> <span>{{item.parentDeptName}}</span> </view>
              <view> <span>{{item.deptName}}</span> </view>
              <view class="opinion flex-block-end" >
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <span v-else>{{item.userName}}</span>
                <span> {{item.approvalTime}}</span>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="form-row" style="min-height: 120rpx;">
        <view class="flex-one form-border-right">
          <label>主办部门负责人审签</label>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['cldReview'] != undefined">
            <view v-for="item in detailObj1.opinion.cldReview">
              <view> <span>{{item.opinion}}</span> </view>
              <view class="opinion flex-block-end" >
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <span v-else>{{item.userName}}</span>
                <span> {{item.approvalTime}}</span>
              </view>
            </view>
          </template>
        </view>
        <view class="flex-one form-border-right">
          <label>会签</label>
          <template v-if="signList != null && signList.length > 0">
            <view v-for="item in signList">
              <view> <span>{{item.name}}（{{item.state}}）</span> </view>
            </view>
          </template>
        </view>
      </view>

      <view class="form-row">
        <view class="flex-one form-border-right">
          <label>主送</label>
          <span>{{detailObj1.detailObj.mainTo}}</span>
        </view>
        <view class="flex-one form-border-right">
          <label>批示分印送</label>
          <span>{{detailObj1.detailObj.psfs}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-two form-border-bottom">
          <label>拟稿</label>
          <span>{{detailObj1.detailObj.drafterDeptName}}</span>
        </view>
        <view class="flex-two form-border-bottom">
          <label>姓名</label>
          <span>{{detailObj1.detailObj.drafterName}}</span>
        </view>
        <view class="flex-two form-border-right">
          <label>电话</label>
          <span>{{detailObj1.detailObj.drafterPhone}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one form-border-right">
          <label>办公室审核</label>
          <template v-if="detailObj1.opinion != null && detailObj1.opinion['zhsshReview'] != undefined">
            <view v-for="item in detailObj1.opinion.zhsshReview">
              <view> <span>{{item.opinion}}</span> </view>
              <view class="opinion flex-block-end" >
                <!-- base64签名图片 -->
                <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                <span v-else>{{item.userName}}</span>
                <span> {{item.approvalTime}}</span>
              </view>
            </view>
          </template>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one form-border-right">
          <label>标题</label>
          <span>{{detailObj1.detailObj.title}}</span>
        </view>
      </view>
      <view class="form-row" style="min-height: 120rpx;">
        <view class="flex-one form-border-right">
          <label>拟稿说明</label>
          <span>{{detailObj1.detailObj.description}}</span>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one form-border-right">
          <label>正文: </label>
          <template v-if="detailObj1.detailBody !=null">
            <view v-for="item in detailObj1.detailBody.doc">
              <span>{{item.attachName}}</span>
            </view>
          </template>
        </view>
      </view>
      <view class="form-row">
        <view class="flex-one form-border-right">
          <view>
            <label>附件: </label>
            <template v-if="detailObj1.detailAttachment != undefined && detailObj1.detailAttachment.length > 0 ">
              <view v-for="item in detailObj1.detailAttachment">
                <span>{{item.attachName}}</span>
              </view>
            </template>
          </view>
          <view>
            <label>背景公文: </label>
            <template v-if="detailObj1.relation != undefined && detailObj1.relation.length > 0 ">
              <view v-for="item in detailObj1.relation">
                <span>{{item.title}}</span>
              </view>
            </template>
          </view>
        </view>
      </view>

    </view>
    <view class="form-border form-row" style="min-height: 120rpx; margin-top: 20rpx;">
      <view class="flex-one form-border-right">
        <label>拟办意见</label>
        <template v-if="detailObj1.opinion != null && detailObj1.opinion['nibanReview'] != undefined">
          <view v-for="item in detailObj1.opinion.nibanReview">
            <view> <span>{{item.deptName}}</span> </view>
            <view> <span>{{item.opinion}}</span> </view>
            <view class="opinion flex-block-end" >
              <!-- base64签名图片 -->
              <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
              <span v-else>{{item.userName}}</span>
              <span> {{item.approvalTime}}</span>
            </view>
          </view>
        </template>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  name: "compo-read",
  props: {
    detailObj1: {
      detailObj:Object,       // 公文基本信息
      detailBody:Object,      // 正文
      detailAttachment:Object,// 附件
      relation:Object,        // 附加公文[{"id":"1c0962f8839d46f792f84e5c89c96f14","title":"ppap","relateDocId":"4ec205b8334446f9b932d0fcb3896bc8","proInstId":"4ec205b8334446f9b932d0fcb3896bc8"},{"id":"2f4aa437ecba4c748bff911f03667147","title":"py","relateDocId":"86d30c881c494b468534685bb0746174","proInstId":"86d30c881c494b468534685bb0746174"}]
      opinion:Object,         // 意见
    },
    proInstId: {
      type: String,
      default: ''
    },
    extendIdForRelate: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      prevDate: '',
      prevUser: '',
      signList: [], // 会签
    };
  },

  watch: {
    proInstId: {
      handler(nval, oval) {
        if (this.util.isNotEmpty(nval)) {
          // 获取传送信息
          // this.getPrevInfo(nval)
        }
      },
      immediate: true,
      deep: true
    },
    extendIdForRelate: {
      handler(nval, oval) {
        if (this.util.isNotEmpty(nval)) {
          // 获取会签信息
          this.getSignList(nval)
        }
      },
      immediate: true,
      deep: true
    }
  },

  computed: {
    mj() {
      let m = this.dict.getDictNameByDictCode('mj',this.detailObj1.detailObj.secrecyLevel)
      return this.util.isEmpty(m) ? '无' : m
    }
  },

  created() {

  },

  mounted() {

  },

  methods: {
    // 获取传送信息
    getPrevInfo(proInstId) {
      let _this = this
      _this.$http({
        url: _this.$http.adornUrl(`/caac/oa/component/workflow/workflowController/getGwProTrack`),
        method: 'get',
        params: {
          'systemKey': _this.cache.get('userInfo').systemKey,
          'systemFlag': _this.cache.get('userInfo').systemFlag,
          'proInstId': proInstId
        }
      }).then(({data}) => {
        if (data.code == 200) {
          _this.prevDate = data.data.createTime
          _this.prevUser = data.data.sendUserName
        }
      })
    },

    // 获取会签信息
    getSignList(proInstId) {
      let _this = this
      _this.$http({
        url: _this.$http.adornUrl(`/caac/oa/mhjcomponent/countersign/countersignController/countersign`),
        method: 'get',
        params: {
          'systemKey': _this.cache.get('userInfo').systemKey,
          'systemFlag': _this.cache.get('userInfo').systemFlag,
          'gongwenId': proInstId
        }
      }).then(({data}) => {
        if (data.code == 200) {
          _this.signList = data.data
        }
      })
    },

  }



}
</script>

<style scoped>
.content {
  padding: 10rpx;
  word-break: break-all;
}
.tranInfo {
  display: flex;
  justify-content: flex-end;
  margin-right: 10rpx;
}
.tranInfo span {
  font-weight: 600;
}
.jjzy {
  margin: 26rpx 10rpx;
}
.jjzy-border {
  border: 1px solid #ed1c24;
  color: #ed1c24 !important;
  padding: 10rpx;
}
.mj {
  display: flex;
  justify-content: flex-end;
}
.title {
  display: flex;
  justify-content: center;
  color: #ed1c24;
  font-weight: 600;
  font-size: 36rpx;
  margin-bottom: 20rpx;
  letter-spacing: 10rpx;
}
.title span {
  color: #000000;
}
.form-border {
  border: 1px solid #E00418;
  border-bottom: none;
  border-right: none;
}
.form-border-right {
  border-bottom: 1px solid #E00418;
  border-right: 1px solid #E00418;
}
.form-border-bottom {
  border-bottom: 1px solid #E00418;
}
.form-margin {
  margin-left: -0.5px;
  margin-right: -0.5px;
}
.form-row {
  display: flex;
  justify-content: center;
  flex: 1;
}
.form-row label {
  color: #ed1c24;
  padding: 10rpx;
  text-align: center;
}
.form-row span {
  color: #000000;
  padding: 10rpx;
  text-align: left;
}
.flex-block {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.flex-center {
  display: flex;
  align-items: center;
}
.flex-one {
  flex: 1;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-two {
  flex: 2;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-three {
  flex: 3;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-four {
  flex: 4;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-five {
  flex: 5;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-six {
  flex: 6;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-seven {
  flex: 7;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-eight {
  flex: 8;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-nine {
  flex: 9;
  position: relative;
  padding: 16rpx 10rpx;
}

.flex-ten {
  flex: 10;
  position: relative;
  padding: 16rpx 10rpx;
}
.flex-eleven {
  flex: 11;
  position: relative;
  padding: 16rpx 10rpx;
}
.flex-twelve {
  flex: 12;
  position: relative;
  padding: 16rpx 10rpx;
}
.flex-block-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  /* font-family: SimSun; */
}
.opinion span {
  /*font-weight: 600;
  color: #000000;*/
}
</style>